<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEUI源码-面板组件</title>
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./panel.css">
    <style>
        .box{
            width: 100px;
            height: 100px;
            /* border: 1px solid #000; */
            /* background-color: red; */
            /* 轮廓  看上去和border一样，但是不占用空间 */
            /* outline: 2px solid red; */
        }

    </style>
</head>
<body>
    <div class="WEUI-page">

        <div class="WEUI-page__hd">
            <h1 class="WEUI-page__title">Panel</h1>
            <p class="WEUI-page__desc">面板</p>
        </div>
        <div class="WEUI-page__bd">
            <!-- Panel组件 -->
            <div class="WEUI-panel">
                <div class="WEUI-panel__hd">
                    图文组合列表
                </div>
                <div class="WEUI-panel__bd">
                    <!-- 开始了 media-box组件 -->
                    <a href="javascript:;" class="WEUI-media-box WEUI-media-box_appmsg">
                        <div class="WEUI-media-box__hd">
                            <img src="" alt="" class="WEUI-media-box__thumb">
                        </div>
                        <div class="WEUI-media-box__bd">
                            <strong class="WEUI-media-box__title">标题一</strong>
                            <p class="WEUI-media-box__desc">aaaaaaaa</p>
                        </div>
                    </a>
                    <a href="javascript:;" class="WEUI-media-box WEUI-media-box_appmsg">
                        <div class="WEUI-media-box__hd">
                            <img src="" alt="" class="WEUI-media-box__thumb">
                        </div>
                        <div class="WEUI-media-box__bd">
                            <strong class="WEUI-media-box__title">标题二</strong>
                            <p class="WEUI-media-box__desc">aaaaaaaa</p>
                        </div>
                    </a>
                </div>
                <div class="WEUI-panel__ft"></div>
            </div>
            <div class="WEUI-panel">
                <div class="WEUI-panel__hd">
                    图文组合列表
                </div>
                <div class="WEUI-panel__bd">
                    <!-- 开始了 media-box组件 -->
                    <a href="javascript:;" class="WEUI-media-box WEUI-media-box_appmsg">
                        <div class="WEUI-media-box__hd">
                            <img src="" alt="" class="WEUI-media-box__thumb">
                        </div>
                        <div class="WEUI-media-box__bd">
                            <strong class="WEUI-media-box__title">标题一</strong>
                            <p class="WEUI-media-box__desc">aaaaaaaa</p>
                        </div>
                    </a>
                    <a href="javascript:;" class="WEUI-media-box WEUI-media-box_appmsg">
                        <div class="WEUI-media-box__hd">
                            <img src="" alt="" class="WEUI-media-box__thumb">
                        </div>
                        <div class="WEUI-media-box__bd">
                            <strong class="WEUI-media-box__title">标题二</strong>
                            <p class="WEUI-media-box__desc">aaaaaaaa</p>
                        </div>
                    </a>
                </div>
                <div class="WEUI-panel__ft"></div>
            </div>
        </div>

    </div>
</body>
</html>